<template>
  <div class="app-container">
    <h3 style="margin-top: -20px; font-weight: bold;">商品信息</h3>
    <div>
      <span style="font-size: 16px;">拼团名称: {{props.collageName}}</span>
    </div>
    <div style="margin-top: 10px; ">
    </div>
    <div style="margin-top: 10px;  display: flex; align-items: center;">
      <span style="font-size: 16px;">拼团编码: {{props.collageCode}}</span>
      <span style="font-size: 16px;  margin-right: 8px; margin-left: 50px;">玩法: </span>
      <dict-tag :options="collage_play_way" :value="props.playWay" />
    </div>
  </div>
  <el-divider style="margin-top: -10px;"/>
  <div class="app-container" style="margin-top: -20px;">
    <el-form :model="queryParams" :inline="true" >
      <el-form-item label="玩家号" prop="phone">
        <el-input v-model="queryParams.inviteCode" placeholder="请输入玩家号" clearable/>
      </el-form-item>
      <el-form-item label="卡密" prop="phone">
        <el-input v-model="queryParams.carmiInfo" placeholder="请输入卡密" clearable/>
      </el-form-item>
      <el-form-item label="是否球队" prop="phone">
        <el-select v-model="queryParams.isTeamFlag" placeholder="请选择球队" clearable>
          <el-option v-for="dict in sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜 索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重 置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="dataList" border>
      <el-table-column label="卡密信息" align="center" prop="carmiInfo" width="750"/>
      <el-table-column label="用户信息" align="center" >
        <template #default="scope">
          <div class="common-flex-image" v-if="scope.row">
            <image-preview
              style="width: 80px; height: 80px"
              :src="scope.row.headPortrait">
            </image-preview>
            <div style="width: 250px;">
              <div style="margin-top: 10px;">昵称：{{scope.row.nickName}}</div>
              <div style="margin-top: 10px;">玩家号：{{scope.row.inviteCode}}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination  v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                 v-model:limit="queryParams.pageSize" @pagination="getList" />
  </div>
</template>
<script lang="ts" setup>
import { queryCollageUserCarmiInfo } from '@/api/workflow/cardCollage';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { collage_play_way, collage_status, collage_module, sys_yes_no} = toRefs<any>(proxy?.useDict('collage_play_way', 'collage_status','collage_module', 'sys_yes_no'));
const props = defineProps({
  collageId: {
    type: String,
    default: undefined
  },
  collageCode: {
    type: String,
    default: undefined
  },
  collageName: {
    type: String,
    default: undefined
  },
  playWay: {
    type: String,
    default: undefined
  }
});

const loading = ref(false);
const showSearch = ref(true);
const total = ref(0);
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  collageId: props.collageId,
  phone: '',
  inviteCode: '',
  isTeamFlag: '',
  carmiInfo: ''
});
const dataList = ref([]);

const handleQuery = () => {
  queryParams.pageNum = 1;
  queryParams.pageSize = 10;
  getList();
};

const resetQuery = () => {
  queryParams.pageNum = 1;
  queryParams.pageSize = 10;
  queryParams.phone = undefined;
  queryParams.inviteCode = undefined;
  queryParams.isTeamFlag = undefined;
  queryParams.carmiInfo = undefined;
  handleQuery();
};

const getList = () => {
  loading.value = true;
  queryCollageUserCarmiInfo(queryParams).then(response => {
    dataList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
};

watch(
  () => props.collageId,
    (newVal) => {
      queryParams.collageId = newVal;
      getList();
  },
  { immediate: true, deep: true }
);

watch(
  () => props.collageCode,
  { immediate: true, deep: true }
);

watch(
  () => props.playWay,
  { immediate: true, deep: true }
);

watch(
  () => props.collageName,
  { immediate: true, deep: true }
);
</script>
